<template>
  <div :class="['activity-collect', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="activity-collect-title">
      活动集锦
    </div>
    <div class="img-list" v-if="picture_list.length != 0">
      <el-image fit="cover" class="img" :src="item.url || getBigImg(item?.opus_id[0]?.id)" alt="" v-for="(item, index) in picture_list" :key="index" @click="lookBigImg(item)" />
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <div @click="lookMore" v-if="!$ua.isFromPc()" class="look-more" v-show="this.picture_list.length < this.picture_total">
      查看更多
    </div>
    <Pagin
      ref="page"
      v-show="picture_list && picture_list.length != 0 && $ua.isFromPc()"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="$ua.isFromPc() ? 8 : 6"
      :layout="'prev, pager, next'"
      background
      :position="'center'"
      class="pagin"
    ></Pagin>
  </div>
</template>

<script>
import Pagin from '@/components/pagin.vue'
import { getToken } from '../../../utils/auth'
import { getBigImg } from '../../../utils/downloadFile'
export default {
  name: '',
  components: {
    Pagin
  },
  // props: ['result'],
  data () {
    return {
      picture_list: [],
      page_count: 6,
      page_num: 1,
      picture_total: 0
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.refresh()
  },
  methods: {
    getBigImg,
    lookBigImg(item) {
      if (!getToken()) return this.$message.warning('请您先登陆才可以查看大图')
      // console.log(id)
      if (process.browser && item.opus_id && item.opus_id[0]?.id) {
        let {
          BasicDraw,
          BigImageShow
        } = require("../../../utils/main.js")
        let basicDraw = new BasicDraw(); // 创建基础渲染类
        basicDraw.start(); // 开始渲染
        new BigImageShow().showBigImg(item.opus_id[0]?.id)

        document.getElementById('bigIamgeClose').addEventListener('click', (e) => {
          basicDraw.dispose()
          e.stopPropagation()
        })
      } else {
        this.$message.warning('当前集锦未上传大图')
      }
    },
    refresh() {
      this.$refs.page.refresh()
    },
    getDataList(page, page_size, callback) {
      let params = {
        page_num: page,
        page_count: page_size,
        special_id: this.$route.query.data_id,
      }
      // 获取专题活动列表
      this.$api.getActivityCollec(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result)
          this.picture_total = res.result.total_count
          this.picture_list = Array.isArray(res.result.item_list) ? res.result.item_list : []
          callback(this.picture_list, res.result.total_count)
        }
      })
      // callback(this.result.picture_list, this.result.picture_list.length)
    },
    lookMore() {
      this.page_num++
      let params = {
        page_num: this.page_num,
        page_count: this.page_count,
        special_id: this.$route.query.data_id
      }
      this.$api.getActivityCollec(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result)
          this.picture_total = res.result.total_count
          if (Array.isArray(res.result.item_list)) {
            res.result.item_list.forEach(item => {
              this.picture_list.push(item)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.activity-collect {
  &.z-web {
    .activity-collect-title {
      font-size: 44px;
      font-weight: 600;
      color: #000;
      line-height: 72px;
      text-align: center;
      margin-bottom: 32px;
    }

    .img-list {
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill, 320px);
      grid-gap: 10px;
      margin-bottom: 30px;

      .img {
        width: 320px;
        height: 240px;
        margin-bottom: 30px;
      }
    }
  }

  &.z-phone {
    padding: 0 pxtorem(24) pxtorem(36);
    .activity-collect-title {
      font-size: pxtorem(36);
      font-weight: 600;
      color: #000;
      text-align: center;
      margin: pxtorem(40) 0 pxtorem(60);
    }

    .img-list {
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill, pxtorem(340));
      grid-gap: 10px;

      ::v-deep(.el-image) {
        width: pxtorem(340);
        height: pxtorem(255);
        margin-bottom: 24px;
      }
    }
  }
}
</style>
